<div class="successfull" style="display:<?php echo ($this->session->flashdata('userMesg') ? 'block' : 'none') ?> ">
                <?php echo $this->session->flashdata('userMesg'); ?>  
            </div>

    <div class="headingBox">
        <div class="FloatLeft"><img alt="" src="<?php echo imageUrl(); ?>red_leftRound.jpg" height="24" width="5"></div>
        <div style="width:992px;" class="red_midRound"><?php echo $page_heading; ?></div>
        <div class="FloatLeft"><img alt="" src="<?php echo imageUrl(); ?>red_rightRound.jpg" height="24" width="5"></div>
    </div>
        <div>
        <?php 
			if( isset($file_error) && count($file_error) > 0 )
			{
				foreach( $file_error as $err) {
					echo '<div class="errorMsg_1" style="" align="center">'.$err.'</div>';	
				}	
				unset($err);
			}
		?>
        
        <form method="post" action="<?php echo base_url().$this->uri->segment(1); ?>/save<?php echo "/$ext"; ?>" onsubmit="return validate();">
            <input name="sbmt" id="sbmt" value="1" type="hidden">
            <table class="subContentTable" cellpadding="2" cellspacing="5" width="100%">
                <tbody>
                <tr height="22">
                    <td width="20%"><strong>Name:</strong></td>
                    <td width="35%">
                        <?php echo isset($full_name) ? $full_name : '-';  ?>
                    </td>
                    <td width="20%"><strong>Location:</strong></td>
                    <td width="35%">
	                    <?php echo isset($location_name) ? $location_name : '-'; ?>
                    </td>
                </tr>
                <tr height="22">
                    <td width="20%"><strong>Extension:</strong></td>
                    <td width="35%">
                    <?php echo isset($agent) ? $agent : '-'; ?>
                    </td>
                     <td width="20%"><strong>Password:</strong></td>
                    <td width="35%">
                     <?php echo isset($secret) ? $secret : '-'; ?>
                    </td>
                </tr>
                
                <tr height="22">
                   <td width="20%"><strong>Codecs:</strong></td>
                    <td width="35%">
                        <?php
						  echo isset($allow) ? $allow : '-';
                        ?>
                    </td>
                    
                    <td width="20%"><strong>Context:</strong></td>
                    <td width="35%">
                     <?php  
					 		echo isset($context) ? $context : '-';
					 ?>
                    </td>
                    
                </tr>
                
             </tbody>
              </table>
            
            
             <div class="headingBox">
                <div class="FloatLeft"><img alt="" src="<?php echo imageUrl(); ?>red_leftRound.jpg" height="24" width="5"></div>
                <div style="width:992px;" class="red_midRound">Skill Assignment</div>
                <div class="FloatLeft"><img alt="" src="<?php echo imageUrl(); ?>red_rightRound.jpg" height="24" width="5"></div>
    		</div>
             <div>
                <table class="subContentTable" cellpadding="2" cellspacing="5" width="100%">
                <tr>
                    <td> 
                    	<div id="error_msg_div">
                    	<?php  if( count($error_arr) > 0 ) {
									foreach( $error_arr as $err) {
										echo '<div class="errorMsg_1" style="padding:1px;" align="center">'.$err.'</div>';	
									}
								}
								//vardump($error_arr); 
							?>
                        </div>
                    
                    	 <div class="agent_skill_container" style="padding:5px; float:left; width:184px;" >
                        	  <h4>Available Skills</h4>
                              <div class="div_container">
                        	  	<ul>
                                 <?php
								 //vardump($agent_skill_arr); 
									foreach($all_skills as $row) 
									{
										$display = ( @in_array($row->name, $agent_skill_arr) ) ? 'display:none;' : '';
										$skill_name = trim($row->name);
									?>
										<li id="<?=$skill_name; ?>" style=" <?php echo $display; ?> " onclick="add_skill('<? echo $skill_name; ?>');" ><?php echo $row->name; ?></li>
									
									<?php
									}
									?>
                             	 </ul>
                              </div> 
						</div>
                        
                        <div class="agent_skill_right" style="margin-left:5px; width:791px; float:left;">
                             <div class="header">
                                <div style="float:left; width:80px;">
                                    <strong>Primary Skill</strong>
                                </div>
                                <div style="float:left; width:100px;">
                                    <strong>Skill</strong>
                                </div>
                                <div style="float:left; width:300px;">
                                    <strong>Priority</strong>
                                </div>
                                <div style="float:left; width:50px;">
                                    <strong>Priority</strong>
                                </div>
                                <div style="float:left; width:80px;">
                                    <strong>Caller ID</strong>
                                </div>
                                <div style="float:left; width:100px;">
                                    <strong>Queue Caller ID</strong>
                                </div>
                            </div>
                            <div style="height:307px; overflow:auto; width:100%; float:left;">
 	                            <div id="agent_skill_right">
                                	<?php 
									if( isset($agent_skills) && count($agent_skills) > 0 )
									{
										foreach($agent_skills as $row) {
											$skill_name = $row->queue_name;	
											$priority = $row->penalty;	
											$callerid = $row->callerid;	
											$queue_callerid = $row->queue_callerid;	
											$primary_skill = $row->primary_skill;
											
											$checked = '';
											$slider_disable = '';
											$txt_readonly = '';
											if($skill_name == $primary_skill){
												$checked = "checked='checked'";
												$slider_disable = "disabled: true,";
												$txt_readonly = "readonly='readonly'";
											} 
											
 											$html = '<div class="row">
													<input type="hidden" class="skill_hidden" value="'.$skill_name.'" name="skills[]" />
													<div style="float:left; width:80px; padding:3px 3px 3px 3px;" align="center"><input onclick="onClickPrimarySkill(\''.$skill_name.'\')" type="radio" '.$checked.' name="primary_skill[]" value="'.$skill_name.'" /></div>
													<div style="float:left; width:100px; padding:3px 3px 5px 3px;;">'.$skill_name.'</div>
													<div style="float:left; width:304px; padding:5px 0px 4px 2px;"><div id="slider_'.$skill_name.'"></div></div>
													<div style="float:left; width:50px; padding:1px 3px 1px 3px;"><input type="text" '.$txt_readonly.' onkeypress="return intOnly(this,event);"  maxlength="2" value="'.$priority.'" id="txt_'.$skill_name.'" onblur="setSliderVal(\''.$skill_name.'\')" name="priority['.$skill_name.']" style="width:90%;" /></div>
													<div style="float:left; width:80px; padding:1px 3px 1px 3px;"><input type="text" value="'.$callerid.'" name="callerid['.$skill_name.']" style="width:90%;" /></div>
													<div style="float:left; width:100px; padding:1px 3px 1px 3px"><input type="text" value="'.$queue_callerid.'" name="queue_callerid['.$skill_name.']" style="width:90%;" /></div>
													<div style="float:left; padding-top:5px; border:none; width:16px;"><img style="cursor:pointer" src="'.imageUrl().'del_opt.gif" onclick="remove_skill(this,\''.$skill_name.'\')"></div>
													</div><div style="clear:both"></div>';	
											echo $html;		
											
											?>
                                            <script>
											$(function() {
												 slider_obj = $( "#slider_<?php echo $skill_name; ?>" ).slider({ min: 0,
																		max: 100,
																		range: "min",
																		slide: function(event, ui) 
																		{
																			$("#txt_<?php echo $skill_name; ?>").val(ui.value);
																		},
																		<?php echo $slider_disable; ?>
																		value : <?php echo (int)$priority; ?>  });
												});
											</script>	
											<?
                                            }// end foreach
										}// end if
									?>
    	                         </div>
                             </div>
                         </div>
                       <div style="clear:both"></div>
                    
                    </td>
                </tr>
                </table>
                
                  <tr bgcolor="#fff1d5">
                    <td colspan="4" align="left">
                        <input value="" class="backBtn" onclick="location.href='<?php echo base_url().$this->uri->segment(1); ?>';" type="button">
                        <input value="" class="submitBtn" type="submit">
                    </td>
                </tr>
            </tbody></table>
            
            
            </div>    
            
            
        </form> 
    </div>
 <script>
	$('#agents').multiSelect({
			selectableHeader : '<h4>Available Skill</h4>',
			selectionHeader : '<h4>Assigned Skill</h4>'
		});
		
</script>
  
<script>
							function add_skill(skill_name) {
								$('#'+skill_name).hide();
								
								html = '<div class="row">';
								html += '<input type="hidden" class="skill_hidden" value="'+skill_name+'" name="skills[]" />';
								html += '<div style="float:left; width:80px; padding:3px 3px 3px 3px;" align="center"><input type="radio" name="primary_skill[]" onclick="onClickPrimarySkill(\''+skill_name+'\')" value="'+skill_name+'" /></div>';
								html += '<div style="float:left; width:100px; padding:3px 3px 5px 3px;;">'+skill_name+'</div>';
								html += '<div style="float:left; width:304px; padding:5px 0px 4px 2px;"><div id="slider_'+skill_name+'"></div></div>';
								html += '<div style="float:left; width:50px; padding:1px 3px 1px 3px;"><input type="text" maxlength="2" onkeypress="return intOnly(this,event);" id="txt_'+skill_name+'" onblur="setSliderVal(\''+skill_name+'\')" name="priority['+skill_name+']" value="10" style="width:90%;" /></div>';
								html += '<div style="float:left; width:80px; padding:1px 3px 1px 3px;"><input type="text" name="callerid['+skill_name+']" style="width:90%;" /></div>';
								html += '<div style="float:left; width:100px; padding:1px 3px 1px 3px"><input type="text" name="queue_callerid['+skill_name+']" style="width:90%;" /></div>';
								html += '<div style="float:left; padding-top:5px; border:none; width:16px;"><img style="cursor:pointer" src="<?php echo imageUrl(); ?>del_opt.gif" onclick="remove_skill(this,\''+skill_name+'\')"></div>';
								html += '</div><div style="clear:both"></div>';
								$('#agent_skill_right').append(html);
								
								$(function() {
								 slider_obj = $( "#slider_"+skill_name ).slider({ min: 0,
														max: 100,
														range: "min",
														slide: function(event, ui) 
														{
															$("#txt_"+skill_name).val(ui.value);
														},
														value : 10  });
								});
								
							}
							
							function setSliderVal(skill_name)
							{
								$('#slider_'+skill_name).slider("value", $("#txt_" + skill_name).val());
							}
							
							function remove_skill(obj, skill_name)
							{
								$('#'+skill_name).show();
								obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
							}
							
							function onClickPrimarySkill(skill_name)
							{
								$('#slider_'+skill_name).slider("value", 10);
								$('#txt_'+skill_name).val(10);

								all_skills  = $('.skill_hidden');
								if( all_skills.length > 0 ) 
								{
									for( i = 0; i < all_skills.length; i++ ) {
										$( "#slider_"+all_skills[i].value ).slider({ disabled: false });
										$('#txt_'+all_skills[i].value).prop("readonly",false);
									}
								}
								
								$( "#slider_"+skill_name ).slider({ disabled: true });
								$('#txt_'+skill_name).prop("readonly",true);
							}
							
							function validate()
							{
 								error_msg = '';
								var priority_arr = new Array();
								var priority_empty = false;
								var selected_primarty_skill_name = '';
								
								all_skills  = $('.skill_hidden');
								if( all_skills.length == 0 ) {
									error_msg += '<div class="errorMsg_1" style="padding:1px;" align="center">Please select atleast one skill</div>';
								}
								else 
								{
									primary_skill_flag = false;
									primary_skill = document.getElementsByName('primary_skill[]');
									for( i=0; i< primary_skill.length; i++ ) {
										if( primary_skill[i].checked ) {
											primary_skill_flag = true;
											selected_primarty_skill_name = primary_skill[i].value;
										}	
									}
									
									if( ! primary_skill_flag ) {
										error_msg += '<div class="errorMsg_1" style="padding:1px;" align="center">Please select primary skill</div>';
									}
									
									any_priority_less_than_zero = false;
									any_priority_less_then_primaty = false;
																		
									for( i = 0; i < all_skills.length; i++ ) 
									{
										if( $('#txt_'+all_skills[i].value).val() == '' )
										{
											priority_empty = true;	
										}
										else
										{
											priority_arr.push($('#txt_'+all_skills[i].value).val());
											
											if( parseInt($('#txt_'+all_skills[i].value).val(), 10) < 1 ) {
												any_priority_less_than_zero = true;
											}
											
											if( 'txt_'+all_skills[i].id != 'txt_'+selected_primarty_skill_name )
											{
												if( parseInt($('#txt_'+all_skills[i].value).val(), 10) < parseInt($('#txt_'+selected_primarty_skill_name).val(), 10) )
												{
													any_priority_less_then_primaty = true;
												}
											}
										}
									}
									
									if( any_priority_less_than_zero ) {
										error_msg += '<div class="errorMsg_1"  style="padding:1px;" align="center">Priority must be greater than zero</div>';	
									}
									
									if( any_priority_less_then_primaty ) {
										error_msg += '<div class="errorMsg_1"  style="padding:1px;" align="center">Other priority must be greater than primary skill priority</div>';	
									}
									
									if( priority_empty ) {
										error_msg += '<div class="errorMsg_1" style="padding:1px;" align="center">Please enter priority, priority can not be empty</div>';	
									}
									else
									if( arrHasDuplicate(priority_arr) )
									{
										error_msg += '<div class="errorMsg_1" style="padding:1px;" align="center">Priorities can not be same</div>';	
									}
									
									
									
									
								}
								
								if( error_msg == '' ) {
									$("#error_msg_div").html('');
									$("#error_msg_div").hide();	
									return true;
								} else {
									$("#error_msg_div").html(error_msg);
									$("#error_msg_div").show();	
									return false;
								}
							}
							
						</script>  